<template>
<view>
<!--pages/shebao/paydetail/paydetail.wxml-->
<view class="all-box">
  <view class="all-text">{{paymentAll}}</view>
  <view class="alldw">缴纳总额（元）</view>
  <view class="pay-box">
    <view class="count-box">
      <view class="num-text">{{personSum}}</view>
      <view class="dw-text">个人缴纳（元）</view>
    </view>
    <view class="line"></view>
    <view class="count-box">
      <view class="num-text">{{comidSum}}</view>
      <view class="dw-text">单位缴纳（元）</view>
    </view>
  </view>
</view>

<view class="detail-box">

  <view class="title-box">
    <text v-for="(item, index) in project" :key="index" class="context">{{item}}</text>
  </view>

  <view class="count-box">
    <view v-for="(item, index) in details" :key="index" class="item-box">
      <text class="item-text">{{item.name}}</text>
      <text class="item-text">{{item.person==0?'/':item.person}}</text>
      <text class="item-text">{{item.comid}}</text>
    </view>
  </view>
</view>
<collection :collectionData="collectionData" :scroll="scroll" onopenCollection="openCollection" oncloseCollection="closeCollection"></collection>
</view>
</template>

<script>
// pages/shebao/paydetail/paydetail.js
var choseCity = require("../../../../utils/formula.js");
const utils = require("../../../../utils/util.js");
let toggleCollection = true;

export default {
  data() {
    return {
      city: "深圳",
      project: ["项目", "个人缴纳(元）", "单位缴纳(元）"],
      scroll: false,
      paymentAll: "",
      personSum: "",
      comidSum: "",
      details: [],
      collectionData: "",
      computeData: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // utils.colleation(this, "社保缴费计算");
    toggleCollection = true;
    this.setData({
      computeData: JSON.parse(options.computeData)
    });
    this.computePayment(this.computeData);
  },
  methods: {
    computePayment(computeData) {
      const formula = new choseCity.Formula(this.city);
      let yanglao = formula.yanglao(computeData.basePayment, computeData.register);
      let medicare = formula.medicare(computeData.basePayment, computeData.level);
      let injury = formula.injury(computeData.basePayment);
      let birthInsure = formula.birthInsure(computeData.basePayment);
      let shiye = formula.shiye(2200);
      let personSum = parseFloat(yanglao.person_p) + parseFloat(medicare.person_h) + parseFloat(injury.person_e) + parseFloat(birthInsure.person_m) + parseFloat(shiye.person_u);
      let comidSum = parseFloat(yanglao.comid_p) + parseFloat(medicare.comid_h) + parseFloat(injury.comid_e) + parseFloat(birthInsure.comid_m) + parseFloat(shiye.comid_u);
      let paymentAll = personSum + comidSum;
      this.setData({
        details: [{
          name: '养老保险',
          person: yanglao.person_p,
          comid: yanglao.comid_p
        }, {
          name: '医疗保险',
          person: medicare.person_h,
          comid: medicare.comid_h
        }, {
          name: '工伤保险',
          person: injury.person_e,
          comid: injury.comid_e
        }, {
          name: '生育保险',
          person: birthInsure.person_m,
          comid: birthInsure.comid_m
        }, {
          name: '失业保险',
          person: shiye.person_u,
          comid: shiye.comid_u
        }],
        personSum: personSum.toFixed(2),
        comidSum: comidSum.toFixed(2),
        paymentAll: paymentAll.toFixed(2)
      });
    },

    onPageScroll() {
      if (toggleCollection) {
        this.setData({
          scroll: true
        });
        toggleCollection = false;
      }
    },

    closeCollection() {
      toggleCollection = false;
    },

    openCollection() {
      toggleCollection = true;
    }
    /**
     * 用户点击右上角分享
     */


  }
};
</script>
<style>
/* pages/shebao/paydetail/paydetail.wxss */
.all-box{height:400rpx;opacity:1;
    background:linear-gradient(255deg,rgba(255,170,0,1) 0%,rgba(255,102,0,1) 100%);
  }
  
  .all-text{font-size:74rpx;font-family:PingFang SC;font-weight:bold;color:rgba(255,255,255,1);
    opacity:1;text-align: center;padding-top:100rpx;}
  .alldw{font-size:24rpx;font-family:PingFang SC;font-weight:500;color:rgba(255,255,255,1);
    opacity:1;text-align: center;}
  .pay-box{height:200rpx;background:rgba(255,255,255,1);box-shadow:0rpx 0rpx 12rpx rgba(0,0,0,0.11);
    opacity:1;border-radius:6rpx;margin:66rpx 35rpx 0rpx 35rpx;
    display: flex;flex-direction: row;align-items: center;justify-content: space-evenly;}
  
  .count-box{display: flex;flex-direction: column;}
  .num-text{font-size:44rpx;font-family:PingFang SC;font-weight:500;color:rgba(35,35,35,1);opacity:1;}
  .dw-text{font-size:22rpx;font-family:PingFang SC;font-weight:500;color:rgba(142,142,142,1);opacity:1;
    margin-top: 10rpx;}
  .line{height:108rpx;border:1px solid rgba(112,112,112,1);opacity:0.11;}
  
  .detail-box{margin:150rpx 40rpx 0rpx 40rpx;}
  .title-box{display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
  .context{font-size:28rpx;font-family:PingFang SC;font-weight:500;color:rgba(35,35,35,1);opacity:1;
    }
  
  .context:nth-child(1) {
    margin-left: 25rpx;
  }
  
  .context:nth-child(2) {
   margin-left: 65rpx;
  }
  
  .item-box{display: flex;flex-direction: row;align-items: center;justify-content: space-between;
    border-bottom: 1rpx solid #f5f5f5;margin-top: 30rpx;padding-bottom: 20rpx;}
  .item-text{font-size:26rpx;font-family:PingFang SC;font-weight:500;color:rgba(142,142,142,1);opacity:1;
    margin-right: 30rpx;}
  
</style>